<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Plus,
  Location,
  Calendar,
  View,
  Star,
  ChatDotRound
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { getMyTravelNotes } from '../../api/travelNote'
import { authUtils } from '../../utils/auth'

const router = useRouter()

// 游记列表
const myNotes = ref([])
const loading = ref(false)

// 加载我的游记
const loadMyNotes = async () => {
  if (!authUtils.isLoggedIn()) {
    ElMessage.warning('请先登录')
    return
  }

  loading.value = true
  try {
    const result = await getMyTravelNotes({
      page: 1,
      pageSize: 100 // 获取全部
    })

    if (result.success) {
      // 转换数据格式以适配模板
      myNotes.value = result.data.list.map((note) => ({
        id: note.id,
        title: note.title,
        cover: note.cover_image,
        description: note.description,
        cityName: note.city,
        date: note.start_date || note.created_at,
        views: note.view_count,
        likes: note.like_count,
        comments: note.comment_count,
        visibility: note.visibility,
        status: note.status,
        author: note.author?.nickname || note.author?.username || '匿名',
        authorAvatar:
          note.author?.avatar || 'https://picsum.photos/100/100?random=1'
      }))
    } else {
      ElMessage.error(result.message || '加载失败')
    }
  } catch (error) {
    console.error('加载游记列表失败:', error)
    ElMessage.error('加载失败，请重试')
  } finally {
    loading.value = false
  }
}

// 跳转到旅行笔记详情页
const goToNoteDetail = (id) => {
  router.push(`/travel-note/${id}`)
}

// 跳转到创建游记页面
const goToCreateNote = () => {
  if (!authUtils.isLoggedIn()) {
    ElMessage.warning('请先登录')
    return
  }
  router.push('/travel-note/new')
}

// 状态信息
const statusInfo = (note) => {
  if (note.visibility === 'public' && note.status === 'approved')
    return { text: '公开', type: 'success' }
  if (note.visibility === 'public' && note.status === 'pending')
    return { text: '审核中', type: 'warning' }
  if (note.visibility === 'private') return { text: '私密', type: 'info' }
  if (note.status === 'draft') return { text: '草稿', type: 'info' }
  if (note.status === 'rejected') return { text: '未通过', type: 'danger' }
  return { text: '未知', type: 'info' }
}

// 组件挂载时加载数据
onMounted(() => {
  loadMyNotes()
})
</script>

<template>
  <div class="travel-note-list-container">
    <div class="page-header">
      <h1>旅行笔记</h1>
      <el-button type="primary" @click="goToCreateNote">
        <el-icon><Plus /></el-icon>创建新笔记
      </el-button>
    </div>

    <div class="note-list" v-loading="loading">
      <el-row :gutter="32" class="note-row">
        <el-col
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
          v-for="note in myNotes"
          :key="note.id"
          class="note-col"
        >
          <el-card
            class="note-card"
            shadow="hover"
            @click="goToNoteDetail(note.id)"
          >
            <div class="note-cover">
              <img :src="note.cover" :alt="note.title" />
              <div class="note-author">
                <el-avatar :size="32" :src="note.authorAvatar"></el-avatar>
                <span>{{ note.author }}</span>
              </div>
            </div>
            <div class="note-content">
              <h3>{{ note.title }}</h3>
              <el-tag
                class="status-tag"
                :type="statusInfo(note).type"
                size="small"
                >{{ statusInfo(note).text }}</el-tag
              >
              <p class="note-desc">{{ note.description }}</p>
              <div class="note-meta">
                <span
                  ><el-icon><Location /></el-icon> {{ note.cityName }}</span
                >
                <span
                  ><el-icon><Calendar /></el-icon> {{ note.date }}</span
                >
              </div>
              <div class="note-stats">
                <span
                  ><el-icon><View /></el-icon> {{ note.views }}</span
                >
                <span
                  ><el-icon><Star /></el-icon> {{ note.likes }}</span
                >
                <span
                  ><el-icon><ChatDotRound /></el-icon> {{ note.comments }}</span
                >
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <el-empty
        v-if="!loading && !myNotes.length"
        description="暂无游记，去发布第一篇吧～"
      />
    </div>
  </div>
</template>

<style scoped>
.travel-note-list-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.page-header h1 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}

.note-list {
  margin-bottom: 30px;
}

.note-row {
  margin-bottom: -32px; /* 抵消最后一行的 margin-bottom */
}

.note-col {
  margin-bottom: 32px; /* 为每个 col 添加下边距 */
}

.note-card {
  cursor: pointer;
  transition: transform 0.3s;
  height: 100%;
}

.note-card:hover {
  transform: translateY(-5px);
}

.note-cover {
  position: relative;
  height: 180px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 12px;
}

.note-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.note-card:hover .note-cover img {
  transform: scale(1.05);
}

.note-author {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.note-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-desc {
  color: #606266;
  font-size: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: 40px;
}

.note-meta {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 12px;
  margin-bottom: 8px;
}

.note-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.note-stats {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 12px;
}

.note-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.status-tag {
  margin-left: 8px;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
</style>
